﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>通达信脚本网页版(K线图)</title>  
    <link rel="stylesheet" href="content/css/tools.css" />
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
    <link rel="stylesheet" href="plugins/code_color/codemirror.css" />
    <link rel="stylesheet" href="content/css/phone7.tools.css" />
</head>  
<body>

    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>
    <div class="tools">
        <div id="tools_top" class="top">
            <span>指标名称：</span>
            <input class="input" v-model="indexName" />
            <select class="changeIndex" v-model="changeIndex">
                <option value="1">副图</option>
                <option value="0">主图</option>
            </select>
            <button class="toolsButton" v-on:click="execute()">执行</button>
            <button class="toolsButton" onclick="Root.table.clear()">清空参数</button>

            <span >股票代码：</span>
            <input class="input" v-model="symbol" />
            <button class="toolsButton" v-on:click="change()">切换股票</button>

            <label v-on:click="changeDebug()">
                <input type="checkbox" v-model="isDebug" />
                <span style="margin-top:-2px;">输出调试信息</span>
            </label>

            <button class="toolsButton" v-on:click="save()">保存</button>

            <a href="http://opensourcecdn.zealink.com/cache/webcache/hqfunctionhelp/index.html#/13" target="_blank">函数帮助</a>

            <select class="changeIndex" v-model="scriptType">
                <option value="1">通达信脚本</option>
                <option value="2">py脚本</option>
            </select>
        </div>
        <div class="table" id="tools_table">
            <table cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th align="left">参数</th>
                        <th align="left">最小</th>
                        <th align="left">最大</th>
                        <th align="left">缺省</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in list">
                        <td v-on:click="closeEdit(index,'name')">
                            <input v-if="item.name.isEdit" v-model="item.name.value" v-on:click.stop="" />
                            <span v-else=v-else v-on:click.stop="openEdit(index,'name')">{{item.name.value}}</span>
                        </td>
                        <td v-on:click="closeEdit(index,'min')">
                            <input v-if="item.min.isEdit" v-model="item.min.value" v-on:click.stop="" />
                            <span v-else=v-else v-on:click.stop="openEdit(index,'min')">{{item.min.value}}</span>
                        </td>
                        <td v-on:click="closeEdit(index,'max')">
                            <input v-if="item.max.isEdit" v-model="item.max.value" v-on:click.stop="" />
                            <span v-else=v-else v-on:click.stop="openEdit(index,'max')">{{item.max.value}}</span>
                        </td>
                        <td v-on:click="closeEdit(index,'value')">
                            <input v-if="item.value.isEdit" v-model="item.value.value" v-on:click.stop="" />
                            <span v-else=v-else v-on:click.stop="openEdit(index,'value')">{{item.value.value}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="code">
            <textarea id="tools_code"></textarea>
        </div>
        <div class="cache" id="tools_cache">
            <ul>
                <li v-bind:class="{ active: index == activeIndex }" v-for="(item, index) in list" v-on:click="select(index)">
                    {{item.name}} 
                    <span v-on:click.stop="_delete(index)">删除</span>
                </li>
            </ul>
        </div>
    </div>
    

    <script src="../jscommon/umychart.network.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.complier.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.index.data.js"></script>
        
    <script type="text/javascript" src="plugins/code_color/codemirror.js"></script>
    <script type="text/javascript" src="plugins/code_color/javascript.js"></script>

    <script type="text/javascript" src="content/js/vue.js"></script>
    <script type="text/javascript" src="content/js/phone7.tools.js?v=1.1"></script>
    
    <script src="content/js/jquery.min.js"></script>

    <script type="text/javascript" src="plugins/cross.js"></script>

    <script>
        var jsChart;
        JS_EXECUTE_DEBUG_LOG=false;
    
        function getURLParams(name) 
        {
        	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        	var r = window.location.search.substr(1).match(reg);
        	if (r != null) return decodeURI(r[2]);
        	return null;
        }


        function GetUserBuy(obj)
        {
            console.log('[GetUserBuy] obj ', obj);
            var result=[];
            for(var i in obj.KData.Data)
            {
                result[i]=0;
                var item=obj.KData.Data[i];
                if (USER_BUY.has(item.Date)) 
                    result[i]=USER_BUY.get(item.Date).Count;
            }

            return result;
        }

        var USER_BUY;
        function DownloadUserBuy(obj)
        {
            console.log('[DownloadUserBuy] obj ', obj);

            setTimeout(()=>
            { 
                USER_BUY=new Map([
                    [20190705, {Count: 1 }],
                    [20190714, {Count: 3 }],
                    [20190806, {Count: 1 }],
                    [20190826, {Count: 1 }],
                    [20190902, {Count: 2 }],
                ]);
                obj.Success();
            }, 500);
            
        }

        JSComplier.AddVariant({ Name:'USERBUY',Download:DownloadUserBuy, Read:GetUserBuy } );

        var USER_POSITION;  //用户某个股票的持仓
        function DownloadUserPosition(obj)
        {
            console.log('[DownloadUserPosition] obj ', obj);
            //模拟异步读取用户信息
            setTimeout(()=>
            { 
                USER_POSITION=new Map([         //日期 Vol:持仓
                    [20190705, {Vol: 3000 }],   
                    [20190714, {Vol: 4000 }],
                    [20190806, {Vol: 2000 }],
                    [20190826, {Vol: 3000 }],
                    [20190902, {Vol: 10000 }],
                ]);
                obj.Success(); //通知HQChart数据已到达继续执行， 需要要调用，否则指标会一直等待
            }, 500);
            
        }

        JSComplier.AddFunction({ Name:'USERMARKETVALUE',Download:DownloadUserPosition, Invoke:GetUserMarketValue } );

        function GetUserMarketValue(obj)
        {
            console.log('[GetUserMarketValue] obj ', obj);
            var result=[];
            var preVol=0;   //最近一次持仓信息
            var aryClose=obj.Args[0];   //获取第1个参数 (收盘价)
            for(var i in obj.KData.Data)
            {
                result[i]=0;
                var item=obj.KData.Data[i];
                if (USER_POSITION.has(item.Date)) 
                {
                    preVol=USER_POSITION.get(item.Date).Vol;
                    result[i]=preVol*aryClose[i];
                }
                else    //延用最近一次的持仓信息
                {
                    result[i]=preVol*aryClose[i];
                }
            }

            return result;
        }
    
        $(window).resize(resizeCanvas);
    
        function resizeCanvas()
        {
            var height= $(window).height()-300; //300高度给指标编辑器
            var width = $(window).width();
            var divKline=document.getElementById('kline');
            divKline.style.width=width+'px';
            divKline.style.height=height+'px';
            divKline.JSChart.OnSize();
        }
        
        $(function () {
            var symbol = getURLParams('symbol');
            if (symbol == null) symbol = '600000.sh';
    
            var aryIndex = new Array();
    
            var index = getURLParams('index');        //指标1
            if (index == null) index = 'MA';
            aryIndex.push({Index: index, Modify: true, Change: true ,Lock:
                {
                    IsLocked: false,
                    Callback: unlockIndex,
                    BG: 'rgba(200,0,40,0.5)',
                    TextColor: 'rgb(255,255,255)',
                    Text: '上锁了',
                    Font: '12px 微软雅黑',
                    //Count: 10  //锁主右边几条数据
                }});
    
           
            let code = 'VAR1:MA(CLOSE,25),COLORYELLOW;VAR2:MA(CLOSE,40);'
            let code2 = 'MTR:=EXPMEMA(MAX(MAX(HIGH-LOW,ABS(HIGH-REF(CLOSE,1))),ABS(REF(CLOSE,1)-LOW)),N);\n\
        HD :=HIGH-REF(HIGH,1);\n\
        LD :=REF(LOW,1)-LOW;\n\
        DMP:=EXPMEMA(IF(HD>0&&HD>LD,HD,0),N);\n\
        DMM:=EXPMEMA(IF(LD>0&&LD>HD,LD,0),N);\n\
        PDI: DMP*100/MTR;\n\
        MDI: DMM*100/MTR,COLORCYAN;\n\
        ADX: EXPMEMA(ABS(MDI-PDI)/(MDI+PDI)*100,MM),COLORFFB5C5;\n\
        ADXR:EXPMEMA(ADX,MM),COLORYELLOW,LINETHICK2;';
    
            var jsIndexData = new JSIndexScript();
            let testIndex = jsIndexData.Get('VOL');
            console.log(testIndex);
    
            //指标3
            let scriptIndex = 
            { 
                Name: testIndex.Name, Script: testIndex.Script, Args: testIndex.Args, "Modify": true, "Change": true,
                Lock:
                {
                    IsLocked: true,
                    Callback: unlockIndex,
                    BG: 'rgba(200,0,40,0.5)',
                    TextColor: 'rgb(255,255,255)',
                    Text: '上锁了',
                    Font: '12px 微软雅黑',
                    //Count: 10  //锁主右边几条数据
                }
                 
            };
            aryIndex.push(scriptIndex);

            aryIndex.push({ Index: "KDJ", Modify: true, Change: true });
    
            // 创建股票K线图
            jsChart = JSChart.Init(document.getElementById('kline'));
    
            var option =
                {
                    Type: '历史K线图',
                    Windows: aryIndex, //窗口指标
                    Symbol: symbol,
                    IsAutoUpate: true,       //是自动更新数据
    
                    Tool:                   //工具条
                        [
                            { Name: "周期" },
                            { Name: "复权" }
                        ],
    
                    IsShowRightMenu: true,           //右键菜单
                    //IsShowCorssCursorInfo: false,    //是否显示十字光标的刻度信息
    
                    ScriptError: ComplierError,
                    NetworkFilter:NetworkFilter,
    
                    KLine:
                    {
                        DragMode: 1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
                        Right: 1,                    //复权 0 不复权 1 前复权 2 后复权
                        Period: 0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                        MaxReqeustDataCount: 1000,   //数据个数
                        PageSize: 50,               //一屏显示多少数据
                        MaxRequestMinuteDayCount:10,
                        IndexTreeApiUrl: "https://opensourcecache.zealink.com/cache/hqh5/index/commonindextree.json",        //指标树下载地址
                        //Info:["业绩预告","公告","互动易","调研","大宗交易"],       //信息地雷
                        //Info:["业绩预告","公告"],          //信息地雷
                        KLineDoubleClick: true,              //双击分钟走势图
                        IsShowTooltip: true                 //是否显示K线提示信息
                    },
    
                    KLineTitle: //标题设置
                    {
                        IsShowName: true,       //不显示股票名称
                        IsShowSettingInfo: true //不显示周期/复权
                    },

                    //画图工具
                    DrawPicture:
                    {
                        StorageKey:'draw-key',  //给一个唯一的ID, 防止冲突
                    },
    
                    Border: //边框
                    {
                        Left: 60,    //左边间距
                        Right: 60     //右边间距
                    },
    
                    Frame:  //子框架设置
                    [
                        
                    ]
                }
    
            jsChart.SetOption(option);
            //jsChart.LockIndex('飞龙四式',unlockIndex);
    
            resizeCanvas();
    
            Tools.init({
                script: scriptIndex.Script,
                indexName: scriptIndex.Name,
                args: scriptIndex.Args,
                symbol: option.Symbol
            });
        });
        
        function unlockIndex(info)
        {
            console.log(info);
            var lockData = { IndexName: info.Data.IndexName, IsLocked: false };
            info.HQChart.LockIndex(lockData);
        }
        
        function ComplierError(error)
        {
            alert(error);
            console.log('[ComplierError]', error);
        }

        //对外公开一个接口
        Cross.on("setValue", function (data) {
            jsEditor.setValue(data.code);
            Root.top.setIndexName(data.name);
        });

        //对外公开一个接口
        Cross.on("api_execute", function (data) {
            Root.top.execute();
        });

        function NetworkFilter(data, callback)
        {
            console.log('[NetworkFilter] data', data);
        }

    </script>  
</body>  
</html>